<template>
  <el-row justify="space-between">
    <el-col :span="4">
      <el-radio-group size="large" v-model="radio" @change="Change">
        <el-radio-button label="销量" />
        <el-radio-button label="销售额" />
      </el-radio-group>
    </el-col>
    <el-col :span="4">
      <el-select v-model="selected" @change="Change">
        <el-option value="sale_yesterday" label="昨天"/>
        <el-option value="sale_today" label="今天"/>
        <el-option value="sale_three_days" label="前3天"/>
        <el-option value="sale_seven_days" label="前7天"/>
        <el-option value="sale_fourteen_days" label="前14天"/>
      </el-select> 
    </el-col>
  </el-row>

      <div id="pie" class="chart"></div>

      <div id="map" class="chart" style="height: 500px;"></div>

   
    <!-- <div id="map" class="chart"></div> -->
  
  
</template>

<script setup lang="ts">
// 1. 导入echarts 模块
import useMapChart from "@/hooks/mapCharts";
import axios from 'axios';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import china from "../assets/json/china.json";
type EChartsOption = echarts.EChartsOption

// echarts 需要一个容器（DOM）,但是vue创建的时候,一定注意 哪个生命周期是有（onMounted） 真实DOM 可以初始化的

// 请求的数据存储
let pieData = ref<any>([])

let selected = ref("sale_yesterday")
let radio = ref<"销量" | "销售额">("销量")

var pieChart: echarts.ECharts;
var mapChart: echarts.ECharts;
var pieOption: EChartsOption;
let mapOption = useMapChart().option as EChartsOption

enum DayOrMoney{
  sale_yesterday="yesterday_money",
  sale_today="today_money",
  sale_three_days = "three_days_money",
  sale_seven_days="seven_days_money",
  sale_fourteen_days = "fourteen_days_money",
}

onMounted(() => {  
  axios.get('http://kumanxuan1.f3322.net:8360/admin/stat').then((result:any) => {
      let res = result.data.data
      pieData = res.salePie
      // 注册地图
      echarts.registerMap('china', china);
      // 2. 初始化echarts 实例
      var chartDom = document.getElementById('pie') as HTMLElement
      var mapDom = document.getElementById("map") as HTMLElement
      console.log(chartDom);
      pieChart = echarts.init(chartDom)
      mapChart = echarts.init(mapDom)
      // 可能需要对数据进行转换
      const data = res.salePie.map((item) => ({
          name: item.name,
          value: item.sale_yesterday
      }));
      const mapData = res.saleMap.map((item)=>{
        return {
          name:item.areaName,
          value:item.saleNum
        }
      })
      console.log(data,mapData);

      // 3. 传入数据，绘制图表
      // 数据从series 的第一个数组项的data传入
      // series 是 echarts.SeriesOption | echarts.SeriesOption[] | undefined 类型
      (pieOption.series as echarts.SeriesOption[])[0].data = data
      mapOption.series[0].data = mapData
      console.log(pieOption,mapOption);

      

      pieOption && pieChart.setOption(pieOption)
      mapOption && mapChart.setOption(mapOption)
  })
  pieOption = {
      // 鼠标移动上去的提示
      tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
      },
      // 图例
      legend: {
          top: '5%',
          height: 100,
          width:350,
          left:"right"
      },
      
      series: [
          {
              // name: 'Radius Mode',
              type: 'pie',
              radius: ["40%", "70%"],
              label: {
                  show: true,
                  position: "outside"
              },
              // 高亮
              emphasis: {
                  label: {
                      show: true
                  }
              },
              // 图表位置
              center:["20%","60%"],
              data: [
                  { value: 40, name: 'rose 1' },
                  { value: 33, name: 'rose 2' },
                  { value: 28, name: 'rose 3' },
                  { value: 22, name: 'rose 4' },
                  { value: 20, name: 'rose 5' },
                  { value: 15, name: 'rose 6' },
                  { value: 12, name: 'rose 7' },
                  { value: 10, name: 'rose 8' }
              ]
          },
      ]
  }

})

// 单选框和下拉框的change事件
const Change = function(){
  if(radio.value==="销售额"){
    pieOption.series[0].data = pieData.map(item=>{
      return {
        name:item.name,
        value:item[DayOrMoney[selected.value]]
      }
    })
  }else{
    pieOption.series[0].data = pieData.map(item=>{
      return {
        name:item.name,
        value:item[selected.value]
      }
    })
  }
  pieOption && pieChart.setOption(pieOption)
}


// resize事件
 window.addEventListener("resize",()=>{
  pieChart.resize()
 })
</script>

<style scoped>
.chart{
  min-width: 350px;
  width: 100%;
  height: 400px;
  border-bottom: 1px solid #ccc;
}
</style>